<div class="bjui-pageContent">
    <div class="pageFormContent" data-layout-h="0">
        <div class="bjui-doc">
            <h3 class="page-header">微调器</h3>
            <blockquote>
                <p>本节主要介绍框架的微调器。</p>
            </blockquote>
            <h4>初始化</h4>
            <ul>
                <li>Data属性：input添加属性<code>data-toggle="spinner"</code>。
                    <span class="label label-default">DOM示例：</span>　<input type="text" data-toggle="spinner"><br>
                    <p>示例代码：</p>
                    <pre class="brush: html">
                        &lt;input type="text" data-toggle="spinner">
                    </pre>
                </li>
                <li>jQuery API：<code>options可为空</code><br>
                    <pre class="brush: js">
                        $(input).spinner(options)
                    </pre>
                </li>
            </ul>
            <h4>参数（options）</h4>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>min</td>
                        <td>int</td>
                        <td>0</td>
                        <td>[可选] 最小值。</td>
                    </tr>
                    <tr>
                        <td>max</td>
                        <td>int</td>
                        <td>100</td>
                        <td>[可选] 最大值。</td>
                    </tr>
                    <tr>
                        <td>step</td>
                        <td>number</td>
                        <td>1</td>
                        <td>[可选] 步长，每次调整的值大小。</td>
                    </tr>
                    <tr>
                        <td>decimalPlace</td>
                        <td>int</td>
                        <td>0</td>
                        <td>[可选] 小数位数。</td>
                    </tr>
                </tbody>
            </table>
            <h4>事件</h4>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>事件名称</th>
                        <th>中文说明</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>afterchange.bjui.spinner</td>
                        <td>微调后的事件</td>
                        <td>监听该事件，可以在调整值后进行相关操作。</td>
                    </tr>
                </tbody>
            </table>
            <p>这样监听spinner的事件：<code>myspinner - selector</code>表示触发微调的input选择器</p>
            <pre class="brush: js">
                $(document).on('afterchange.bjui.spinner', 'myspinner - selector', function(e, data) {
                    var myvalue = data.value
                    
                    // do something...
                })
            </pre>
            <blockquote class="point">
                <p>如果事件代码写在页片中，为防止页片刷新之类的导致document重复绑定事件，需要在on事件前先调用off方法解除已绑定事件。代码如下：</p>
                <pre class="brush: js">
                    $(document)
                        .off('afterchange.bjui.spinner', '.spinner-score')
                        .on('afterchange.bjui.spinner', '.spinner-score', function(e, data) {
                            var myvalue = data.value
                            
                            // do something...
                    })
                </pre>
            </blockquote>
        </div>
    </div>
    <div class="bjui-footBar">
        <ul>
            <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
        </ul>
    </div>
</div>